<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <button-count></button-count>
        <button-count></button-count>
        <button-count></button-count>
        <button-count></button-count> -->
       <input type="text" v-test.name:hello="1">
    </div>
    <br>
    <script src="./vue.js"></script>
    <!-- <script type="text/x-template" id="tpl">
        <div><button @click="add">add</button><span>{{num}}</span> <el-span></el-span></div>
    </script>
    <template>
        <div><button @click="add">add</button><span>{{num}}</span> <el-span></el-span></div>
    </template> -->
    <script>

        Vue.directive('test',function(el,binding){
            console.log(el);
            console.log(binding);
            console.log(binding.arg + 'world')
        })
        // Vue.component('button-count',{
        //     template:'<div><button @click="add">add</button><span>{{num}}</span></div>',
        //     data(){
        //         return {
        //             num:1
        //         }
        //     },
        //     methods:{
        //         add(){
        //             this.num++;
        //         }
        //     }
        // })

        let vm = new Vue({
            el:'#app',
            data:{
                // str:'hello'
            }
            // template:'',
            // render:
            // components:{
            //     buttonCount:{
            //         template:'#tpl',
            //         data(){
            //             return {
            //                 num:1,
            //                 sex:'女'
            //             }
            //         },
            //         methods:{
            //             add(){
            //                 this.num++;
            //             }
            //         },
            //         components:{
            //             'el-span':{
            //                 template:'<span>span子组件</span>'
            //             }
            //         }
            //     }
            // },
            // methods:{

            // }
        })
    </script>
</body>
</html>